import React from "react";
import {
  View,
  Text,
  FlatList,
  Dimensions,
  StyleSheet,
  ImageBackground,
  TouchableOpacity,
  Image, // 导入 Image 组件
  Button
} from "react-native";
import { Card } from "@rneui/themed";
import Swiper from "react-native-swiper";
import { useRouter } from "expo-router";

const { width } = Dimensions.get("window");

export default function Home() {
  const lunImg1 = require("../../assets/images/lun1.jpg");
  const lunImg2 = require("../../assets/images/lun2.jpeg");
  const lunImg3 = require("../../assets/images/lun3.jpeg");
  const logo = require("../../assets/images/果树.png");

  // 创建实例
  const router = useRouter();

  type GridItems = {
    id: number;
    icon?: string;
    title: string;
  };

  // 轮播图的数据
  const carouselItems = [
    { id: "1", imageUrl: lunImg1 },
    { id: "2", imageUrl: lunImg2 },
    { id: "3", imageUrl: lunImg3 },
  ];

  // 宫格布局的数据（横3竖4）
  const gridItems = [
    { id: 1, title: "古树巡检", icon: logo },
    { id: 2, title: "古树预警", icon: logo },
    { id: 3, title: "古树监测", icon: logo },
    { id: 4, title: "养护管理", icon: logo },
    { id: 5, title: "地上保护", icon: logo },
    { id: 6, title: "地下复壮", icon: logo },
    { id: 7, title: "日常养护工单", icon: logo },
    { id: 8, title: "地上保护工单", icon: logo },
    { id: 9, title: "地下复壮工单", icon: logo },
    { id: 10, title: "古树档案", icon: logo },
    { id: 11, title: "古树统计", icon: logo },
    { id: 12, title: "古树知识", icon: logo },
  ];

  // 点击宫格跳转
  function jump(item: GridItems) {
    console.log("当前宫格信息", item);
    if(item.id === 4){
      router.push("/pages/CareManage/CareManage");
    }else{
      router.push("/pages/TreeCheck/TreeCheck");
    }
    
  }

  // 宫格项的渲染
  const renderGridItem = ({ item }: { item: GridItems }) => (
    <Card containerStyle={styles.card}>
      <TouchableOpacity onPress={() => jump(item)}>
        {item.icon && (
          <View style={styles.iconContainer}>
            {/* 使用 Image 组件来显示 logo */}
            <Image source={item.icon} style={styles.icon} />
          </View>
        )}
        <Text style={styles.cardText}>{item.title}</Text>
      </TouchableOpacity>
    </Card>
  );

 

  return (
    <View style={styles.container}>
      {/* 轮播图 */}
      <Swiper
        style={styles.wrapper}
        showsButtons={false}
        autoplay={true}
        loop={true}
        height={200}
      >
        {carouselItems.map((item) => (
          <ImageBackground
            key={item.id}
            source={item.imageUrl}
            style={styles.carouselItem}
            resizeMode="cover"
          />
        ))}
      </Swiper>

      {/* 宫格布局 */}
      <FlatList
        data={gridItems}
        renderItem={renderGridItem}
        numColumns={3}
        keyExtractor={(item) => item.id.toString()}
        style={styles.grid}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f5f5f5",
  },
  wrapper: {
    height: 200,
  },
  carouselItem: {
    justifyContent: "center",
    alignItems: "center",
    width: width,
    height: 200,
  },
  carouselText: {
    color: "white",
    fontSize: 20,
    fontWeight: "bold",
  },
  grid: {
    marginTop: 5,
  },
  card: {
    margin: 2,
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    height: 120,
  },
  cardText: {
    fontSize: 14,
    textAlign: "center",
  },
  iconContainer: {
    marginBottom: 10, // 为图标与标题之间添加间隔
    justifyContent: "center",
    alignItems: "center",
  },
  // 添加图标的样式
  icon: {
    width: 40, // 设置图标宽度
    height: 40, // 设置图标高度
    resizeMode: "contain", // 保持图标的原始比例
  },
});
